<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>手机号登录-内容</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css"/>
</head>
<body>
    <div id="app">
        <div class="aui-flex-col aui-flex-center" style="margin-top: 40px;">
            <table style="width: 80%;" class="">
                <tr>
                    <td>
                        <div class="aui-content aui-margin-b-15">
                            <ul class="aui-list aui-form-list">
                                <li class="aui-list-item">
                                    <div class="aui-list-item-inner">
                                        <div class="aui-list-item-label-icon">
                                            <i class="aui-iconfont aui-icon-mobile"></i>
                                        </div>
                                        <div class="aui-list-item-input">
                                            <input id="phone_num" type="number" placeholder="请输入手机号" v-model="username">
                                        </div>
                                    </div>
                                </li>

                            </ul>
                            <ul class="aui-list aui-form-list aui-margin-t-10">
                                <li class="aui-list-item">
                                    <div class="aui-list-item-inner">
                                        <div class="aui-list-item-label-icon">
                                            <i class="aui-iconfont aui-icon-lock"></i>
                                        </div>
                                        <div class="aui-list-item-input">
                                            <input id="password" type="password" placeholder="请输入密码" v-model="password">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <!--忘记密码&新用户注册-->
        <div class="aui-flex-col aui-flex-center">
            <table style="width: 80%;">
                <tr>
                    <td>
                    <span class="aui-font-size-12 aui-text-info aui-pull-left" onclick="open_reg()">
                        立即注册
                    </span>
                    </td>
                    <td>
                    <span class="aui-font-size-12 aui-text-info aui-pull-right" onclick="open_forgetpassword()">
                        忘记密码
                    </span>
                    </td>
                </tr>
            </table>
        </div>
        <div class="aui-content aui-text-center aui-margin-t-15">
            <div class="aui-btn aui-font-size-16 cblue-bg white-font button-height"
                 style="width: 80%;" @click="login()">
                登录
            </div>
        </div>
    </div>

</body>
</html>
<script src="../script/api.js"></script>
<script src="../script/common.js"></script>
<script src="../script/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            deviceid: '',
            list: [
                { text: 'Add some todos' }
            ]
        },
        methods: {
            login: function () {
                if(!vm.username){
                    alert('填写手机号或用户名');
                    return false;
                }
                if(!vm.password){
                    alert('密码不能为空');
                    return false;
                }
                api.ajax({
                    url: login_url,
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                    data: {
                        values: {
                            username: vm.username,
                            password: vm.password,
                            deviceid: vm.deviceid
                        }
                    }
                }, function (ret, err) {
                    if (ret) {
                        console.log(JSON.stringify(ret));
                        if(ret.status == 1){
                            var minfo = ret.data.minfo;
                            $api.setStorage('minfo',minfo);
                            $api.setStorage('token',minfo.token);
                            alert("登陆成功");
                            api.sendEvent({
                                name: 'usercenter_init'
                            });
                            setTimeout(function () {
                                api.closeWin({
                                    name: 'login_win'
                                });
                            },100);

                        }else{
                            alert("网络异常");
                        }
                        console.log(JSON.stringify(ret));
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            }
        }
    });

    function open_reg() {
        api.openWin({
            name: 'reg_win',
            url: 'widget://html/reg_win.html',
            pageParam: {
                name: 'pageparamname'
            }
        });
    }
    function open_forgetpassword() {
        api.openWin({
            name: 'forgetpassword_win',
            url: 'widget://html/forgetpassword_win.html',
            pageParam: {
                name: 'pageparamname'
            }
        });
    }
    apiready = function () {
        vm.deviceid = api.deviceId;
    };
</script>